<template>
	<div class="wrapper">
		<!-- 顶部应用栏 -->
		<header class="mdc-top-app-bar">
			<div class="mdc-top-app-bar__row">
				<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
					<BackButton />
					<h1 class="mdc-top-app-bar__title">积分商店</h1>
				</section>
			</div>
		</header>

		<!-- 主要内容区域 -->
		<div class="main-content">
			<!-- 用户积分信息卡片 -->
			<div class="points-info-card">
				<div class="points-info-header">
					<div class="points-icon">
						<i class="material-icons">stars</i>
					</div>
					<div class="points-info">
						<p class="points-label">当前积分</p>
						<p class="points-value">{{ userPoints }}</p>
					</div>
					<div class="points-info">
						<p class="points-label">经验值</p>
						<p class="points-value">{{ userXP }}</p>
					</div>
					<div class="points-info">
						<p class="points-label">等级</p>
						<p class="points-value">Lv{{ userLevel }}</p>
					</div>
				</div>
			</div>

			<!-- 积分规则说明 -->
			<div class="points-rules-card">
				<h2 class="rules-title">积分规则</h2>
				<ul class="rules-list">
					<li>每消费 <span class="highlight">1 元</span> 获得 <span class="highlight">1 积分</span></li>
					<li>超级会员消费享受 <span class="highlight">双倍积分</span></li>
					<li>每条有效评论可获得 <span class="highlight">10 积分</span>，<span class="highlight">每天最多 3 条</span>计入积分</li>
					<li>积分可在积分商店中兑换优惠券等权益</li>
				</ul>
			</div>

			<!-- 商品列表 -->
			<div class="items-section">
				<h2 class="section-title">可兑换商品</h2>
				<div class="items-grid" v-if="items.length > 0">
					<div 
						class="item-card" 
						v-for="item in items" 
						:key="item.itemId"
						@click="showRedeemDialog(item)"
					>
						<div class="item-image">
							<i class="material-icons">card_giftcard</i>
						</div>
						<div class="item-info">
							<h3 class="item-name">{{ item.itemName }}</h3>
							<p class="item-description">{{ item.itemDescription }}</p>
							<div class="item-footer">
								<span class="item-points">{{ item.pointsRequired }} 积分</span>
								<span class="item-stock" v-if="item.stock > 0">库存: {{ item.stock }}</span>
								<span class="item-stock out-of-stock" v-else>缺货</span>
							</div>
						</div>
					</div>
				</div>
				<div class="empty-state" v-else>
					<i class="material-icons">inventory_2</i>
					<p>暂无商品</p>
				</div>
			</div>
		</div>

		<!-- 兑换确认对话框 -->
		<div class="dialog-overlay" v-if="showDialog" @click="closeDialog">
			<div class="dialog-content" @click.stop>
				<div class="dialog-header">
					<h3>确认兑换</h3>
					<i class="material-icons close-icon" @click="closeDialog">close</i>
				</div>
				<div class="dialog-body" v-if="selectedItem">
					<div class="dialog-item-info">
						<i class="material-icons">card_giftcard</i>
						<div>
							<h4>{{ selectedItem.itemName }}</h4>
							<p>{{ selectedItem.itemDescription }}</p>
						</div>
					</div>
					<div class="dialog-points-info">
						<p>需要积分: <span class="points-highlight">{{ selectedItem.pointsRequired }}</span></p>
						<p>当前积分: <span class="points-highlight">{{ userPoints }}</span></p>
						<p v-if="userPoints < selectedItem.pointsRequired" class="error-text">
							积分不足，无法兑换
						</p>
					</div>
				</div>
				<div class="dialog-footer">
					<button class="btn-cancel" @click="closeDialog">取消</button>
					<button 
						class="btn-confirm" 
						@click="confirmRedeem"
						:disabled="!selectedItem || userPoints < selectedItem.pointsRequired || selectedItem.stock <= 0"
					>
						确认兑换
					</button>
				</div>
			</div>
		</div>

		<!-- 底部导航 -->
		<AppFooter></AppFooter>
	</div>
</template>

<script>
	import AppFooter from '../components/AppFooter.vue'
	import BackButton from '../components/BackButton.vue'
	
	export default {
		name: 'PointsStore',
		data: function() {
			return {
				items: [],
				userPoints: 0,
				userXP: 0,
				userLevel: 1,
				showDialog: false,
				selectedItem: null,
				loading: false
			}
		},
		components: {
			AppFooter,
			BackButton
		},
		methods: {
			loadItems: function() {
				this.loading = true;
				this.$axios.post('PointsStoreController/items')
					.then(resp => {
						if (resp.data && (resp.data.code === 200 || resp.data.code === '200')) {
							this.items = resp.data.result || [];
						}
					})
					.catch(err => {
						console.error('加载商品列表失败:', err);
						this.$toast?.error('加载商品列表失败');
					})
					.finally(() => {
						this.loading = false;
					});
			},
			loadUserPoints: function() {
				let user = this.$getSessionStorage('user');
				if (!user || !user.userId) {
					return;
				}
				
				this.$axios.post('PointsStoreController/user/points', this.$qs.stringify({
					userId: user.userId
				}), {
					headers: {
						'Content-Type': 'application/x-www-form-urlencoded'
					}
				})
				.then(resp => {
					if (resp.data && (resp.data.code === 200 || resp.data.code === '200')) {
						const userInfo = resp.data.result || {};
						this.userPoints = userInfo.points || 0;
						this.userXP = userInfo.experiencePoints || 0;
						this.userLevel = userInfo.level || 1;
					}
				})
				.catch(err => {
					console.error('加载积分信息失败:', err);
				});
			},
			showRedeemDialog: function(item) {
				if (item.stock <= 0) {
					this.$toast?.info('该商品已售罄');
					return;
				}
				this.selectedItem = item;
				this.showDialog = true;
			},
			closeDialog: function() {
				this.showDialog = false;
				this.selectedItem = null;
			},
			confirmRedeem: function() {
				if (!this.selectedItem) {
					return;
				}
				
				if (this.userPoints < this.selectedItem.pointsRequired) {
					this.$toast?.error('积分不足');
					return;
				}
				
				if (this.selectedItem.stock <= 0) {
					this.$toast?.error('商品库存不足');
					return;
				}
				
				let user = this.$getSessionStorage('user');
				if (!user || !user.userId) {
					this.$toast?.error('请先登录');
					return;
				}
				
				this.$axios.post('PointsStoreController/redeem', this.$qs.stringify({
					userId: user.userId,
					itemId: this.selectedItem.itemId
				}), {
					headers: {
						'Content-Type': 'application/x-www-form-urlencoded'
					}
				})
				.then(resp => {
					if (resp.data && (resp.data.code === 200 || resp.data.code === '200')) {
						this.$toast?.success('兑换成功！');
						this.closeDialog();
						// 根据商品类型决定跳转：会员卡跳转到超级会员页，其它商品跳转到优惠券页
						const name = this.selectedItem && this.selectedItem.itemName ? this.selectedItem.itemName : '';
						const isMemberItem = name.includes('会员');
						setTimeout(() => {
							if (isMemberItem) {
								this.$router.push('/superMember');
							} else {
								this.$router.push('/coupons');
							}
						}, 500);
					} else {
						this.$toast?.error(resp.data.message || '兑换失败');
					}
				})
				.catch(err => {
					console.error('兑换失败:', err);
					this.$toast?.error('兑换失败：' + (err.response?.data?.message || err.message));
				});
			}
		},
		created() {
			let user = this.$getSessionStorage('user');
			if (user == null) {
				this.$router.push('/login');
				return;
			}
			this.loadItems();
			this.loadUserPoints();
		}
	}
</script>

<style scoped>
	.wrapper {
		min-height: 100vh;
		background-color: #f5f5f5;
	}

	/* 顶部应用栏 */
	.mdc-top-app-bar {
		background-color: #1976D2;
		color: white;
		position: sticky;
		top: 0;
		z-index: 100;
		box-shadow: 0 2px 4px rgba(0,0,0,0.1);
	}

	.mdc-top-app-bar__row {
		display: flex;
		align-items: center;
		height: 72px;
		padding: 0 20px;
	}

	.mdc-top-app-bar__section {
		display: flex;
		align-items: center;
		gap: 16px;
		flex-direction: row;
	}

	.mdc-top-app-bar__title {
		font-size: 22px;
		font-weight: 500;
		margin: 0;
		white-space: nowrap;
		line-height: 1;
	}

	/* 主要内容区域 */
	.main-content {
		padding: 20px 16px;
		padding-bottom: 120px;
	}

	/* 积分信息卡片 */
	.points-info-card {
		background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
		border-radius: 16px;
		box-shadow: 0 4px 20px rgba(255, 215, 0, 0.3);
		padding: 24px;
		margin-bottom: 24px;
		color: #644F1B;
	}

	.points-info-header {
		display: flex;
		align-items: center;
		justify-content: space-around;
		gap: 16px;
	}

	.points-icon {
		font-size: 48px;
		opacity: 0.9;
	}

	.points-info {
		text-align: center;
		flex: 1;
	}

	.points-label {
		font-size: 14px;
		margin: 0 0 8px 0;
		opacity: 0.9;
	}

	.points-value {
		font-size: 28px;
		font-weight: bold;
		margin: 0;
	}

	/* 积分规则卡片 */
	.points-rules-card {
		margin-top: 16px;
		margin-bottom: 24px;
		background-color: #fffbe6;
		border-radius: 12px;
		padding: 12px 16px;
		box-shadow: 0 2px 8px rgba(0,0,0,0.05);
		border-left: 4px solid #FFD700;
	}

	.rules-title {
		font-size: 16px;
		font-weight: 600;
		margin: 0 0 8px 0;
		color: #644F1B;
	}

	.rules-list {
		margin: 0;
		padding-left: 16px;
		font-size: 14px;
		color: #7a6424;
		line-height: 1.6;
	}

	.rules-list .highlight {
		color: #FF6B35;
		font-weight: 600;
	}

	/* 商品列表部分 */
	.items-section {
		margin-top: 24px;
	}

	.section-title {
		font-size: 20px;
		font-weight: 600;
		margin: 0 0 16px 0;
		color: #333;
	}

	.items-grid {
		display: flex;
		flex-direction: column;
		gap: 16px;
	}

	.item-card {
		background-color: white;
		border-radius: 16px;
		box-shadow: 0 2px 8px rgba(0,0,0,0.1);
		padding: 20px;
		display: flex;
		gap: 16px;
		cursor: pointer;
		transition: all 0.3s ease;
	}

	.item-card:hover {
		box-shadow: 0 4px 12px rgba(0,0,0,0.15);
		transform: translateY(-2px);
	}

	.item-image {
		width: 80px;
		height: 80px;
		background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
		border-radius: 12px;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
	}

	.item-image .material-icons {
		font-size: 48px;
		color: #644F1B;
	}

	.item-info {
		flex: 1;
		min-width: 0;
	}

	.item-name {
		font-size: 18px;
		font-weight: 600;
		margin: 0 0 8px 0;
		color: #333;
	}

	.item-description {
		font-size: 14px;
		color: #666;
		margin: 0 0 12px 0;
		line-height: 1.5;
	}

	.item-footer {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.item-points {
		font-size: 16px;
		font-weight: 600;
		color: #FF6B35;
	}

	.item-stock {
		font-size: 12px;
		color: #666;
	}

	.item-stock.out-of-stock {
		color: #f44336;
	}

	.empty-state {
		text-align: center;
		padding: 60px 20px;
		color: #999;
	}

	.empty-state .material-icons {
		font-size: 64px;
		margin-bottom: 16px;
		opacity: 0.5;
	}

	/* 对话框 */
	.dialog-overlay {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 1000;
	}

	.dialog-content {
		background-color: white;
		border-radius: 16px;
		width: 90%;
		max-width: 400px;
		max-height: 80vh;
		overflow-y: auto;
		box-shadow: 0 8px 32px rgba(0,0,0,0.2);
	}

	.dialog-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20px;
		border-bottom: 1px solid #e0e0e0;
	}

	.dialog-header h3 {
		font-size: 20px;
		font-weight: 600;
		margin: 0;
		color: #333;
	}

	.close-icon {
		cursor: pointer;
		color: #999;
		font-size: 24px;
	}

	.dialog-body {
		padding: 20px;
	}

	.dialog-item-info {
		display: flex;
		gap: 16px;
		margin-bottom: 20px;
		padding-bottom: 20px;
		border-bottom: 1px solid #e0e0e0;
	}

	.dialog-item-info .material-icons {
		font-size: 48px;
		color: #FFA500;
	}

	.dialog-item-info h4 {
		font-size: 18px;
		font-weight: 600;
		margin: 0 0 8px 0;
		color: #333;
	}

	.dialog-item-info p {
		font-size: 14px;
		color: #666;
		margin: 0;
	}

	.dialog-points-info {
		display: flex;
		flex-direction: column;
		gap: 12px;
	}

	.dialog-points-info p {
		font-size: 16px;
		margin: 0;
		color: #333;
	}

	.points-highlight {
		font-weight: 600;
		color: #FF6B35;
		font-size: 18px;
	}

	.error-text {
		color: #f44336 !important;
		font-size: 14px !important;
	}

	.dialog-footer {
		display: flex;
		gap: 12px;
		padding: 20px;
		border-top: 1px solid #e0e0e0;
	}

	.btn-cancel,
	.btn-confirm {
		flex: 1;
		padding: 12px 24px;
		border: none;
		border-radius: 8px;
		font-size: 16px;
		font-weight: 600;
		cursor: pointer;
		transition: all 0.3s ease;
	}

	.btn-cancel {
		background-color: #f5f5f5;
		color: #666;
	}

	.btn-cancel:hover {
		background-color: #e0e0e0;
	}

	.btn-confirm {
		background-color: #1976D2;
		color: white;
	}

	.btn-confirm:hover:not(:disabled) {
		background-color: #1565C0;
	}

	.btn-confirm:disabled {
		background-color: #ccc;
		cursor: not-allowed;
		opacity: 0.6;
	}

	/* 响应式设计 */
	@media (max-width: 600px) {
		.points-info-header {
			flex-wrap: wrap;
		}
		
		.points-info {
			min-width: 30%;
		}
	}
</style>

